//es6依赖模块
import Vue from 'vue';
import Vuex from 'vuex';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; 
import VueRouter from 'vue-router';
import '../style/index.less'; 
import {alertMsg1} from './lib';
import AppendNode from '../pages/base/AppendNode.vue';
import PageVuex from '../pages/base/Vuex.vue';
import PageVueRouter from '../pages/base/VueRouter.vue';
import axios from 'axios';

// axios.get('/user?ID=12345')
//   .then(function (response) {
//     // handle success
//     console.log(response);
//   })
//   .catch(function (error) {
//     // handle error
//     console.log(error);
//   })

//alertMsg1('234324');//webpack模块化基础

//vue加载element-ui的组件
Vue.use(ElementUI);


Vue.use(Vuex);


Vue.use(VueRouter);

/* Vue.component(
    'lhr-list-tree',{
        template: '<ul><li><slot></slot></li></ul>',
	}
  ) */
  
//组件自动化全局注册
const requireComponent = require.context(
  // 其组件目录的相对路径
  '../components',
  // 是否查询其子目录
  true,
  // 匹配基础组件文件名的正则表达式
  /.vue$/
)

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName);

  const componentName = fileName.replace(/^\.\//g,'').replace(/.vue$/g,'');
  // 全局注册组件
Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  ) 
})

let TreeData = [
				{
					id: '1',
					nodeText: '基础',
					active: true,
					appendBtn: true,//具有一个测试添加节点的按钮
					childData: [
						{
							id: '1-1',
							nodeText: '安装',
							active: false
						},
						{
							id: '1-2',
							nodeText: '介绍',
							active: false,
							childData: [
								{
									id: '1-2-1',
									nodeText: 'Vue.js是什么',
									active: false
								},
								{
									id: '1-2-2',
									nodeText: '起步',
									active: false
								}
							]
						}
					]
				},
				{
					id: '2',
					nodeText: '深入了解组件',
					active: false,
					childData: [
						{
							id: '2-1',
							nodeText: '组件注册',
							active: false
						}
					]
				},
				{
					id: '3',
					nodeText: '过渡&动画',
					active: false
				}
			];

/* const Page1bar1 = { template: '<div>页面1-1</div>' }
const Page1bar2 = { template: '<div>页面1-2</div>' } */

const routes = [
  { path: '/', component: AppendNode },//默认路由
  { path: '/base/pageVuex/:id', component: PageVuex },//:后面跟着的是可变的部分，将赋值给对应component的$route.params
  { path: '/base/PageVueRouter/:id', component: PageVueRouter }
]

const router = new VueRouter({
	//设置mode为history可以避免地址栏路径多一个#，不过切换到这种模式，
	//打开其他页面时地址栏显示的url并不是真正能访问的，刷新页面或者另外访问该url都是不能正常访问的
	//mode: 'history',
  routes // short for `routes: routes`
})


const store = new Vuex.Store({
  state: {
    testStateCount: 12,
		testStateNum: 0,
		nodeText: ''
  },
  mutations: {
    increase (state) {
      state.testStateCount++;
    },
		setNodeText(state,val){
			state.nodeText = val;
		}
  }
})

var index = new Vue({
	router,
	store,
	el: '#index-app',
	data: {
		indexMsg: '初始化项目1',
		treeData: TreeData,
		nodeText: ''
	},
	methods: {
		getNodetext: function(){
			//return this.nodeText;
			return this.$store.state.nodeText;
			//this.$refs.listTree.appendNodeByInput(this.nodeText)
		}
	},
	computed: {
		...Vuex.mapState([
      'testStateCount',
      'testStateNum'
    ])		
	}
})


